<!--
 * @Author: adolphus adolphus520@163.com
 * @Date: 2022-12-04 10:50:55
 * @LastEditors: 姚杰鸿
 * @LastEditTime: 2024-11-07 14:58:35
 * @Description: file content
-->
<template>
  <el-card class="box-card">
    <template #header>
      <div class="card-header">
        <el-row class="row-bg" justify="space-between">
          <el-col :span="3"></el-col>
          <el-col :span="18">
            <span class="title">用户注册</span>
          </el-col>
          <el-col :span="3"></el-col>
        </el-row>
      </div>
    </template>
    <el-row class="row-bg">
      <el-col :span="24">
        <ElmUsrEdit
          v-model:user="user"
          :is-register="true"
          commit-label="注册"
          cancel-label="重置"
          @commit="commit"
          @cancel="commit"
        />
      </el-col>
    </el-row>
    <el-divider content-position="left">寻求帮助 </el-divider>
    <el-row class="row-bg" justify="space-between">
      <el-col :span="6"> </el-col>
      <el-col :span="6"></el-col>
      <el-col :span="6"
        ><el-link type="success">
          <router-link v-slot="{ href }" to="/login.html">
            <a :href="href">已有帐号</a>
          </router-link>
        </el-link></el-col
      >
    </el-row>
  </el-card>
</template>

<script lang="ts" setup>
import { ref, h } from "vue";
import type { User } from "@/components/elm/ElmUsrEdit";
import { useRouter } from "vue-router";
import { ElNotification } from "element-plus";

const user = ref<User>(),
  $router = useRouter(),
  commit = () => {
    ElNotification({
      title: "提示",
      message: h(
        "i",
        { style: "color: blue" },
        "新用户需激活账户，请联系管理员处理"
      ),
      type: "success",
      position: "top-left",
      duration: 10000,
    });
    $router.push({ name: "Login", state: { account: user.value?.account } });
  };
</script>

<style lang="scss" scoped>
.title {
  font-size: x-large;
  font-weight: 500;
}
.box-card {
  width: 600px;
}
</style>
